<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.js"></script>
	<link rel="stylesheet" href="bootstrap.css">
	<style>
		img{
			width: 80px;
		}
	</style>
</head>
<body>
	<div class="container">

		<h1>Image Uploader</h1>

		<input type="file" name="images[]" id="images" accept="image/*" multiple>
		<hr>
		<div id="images-to-upload">

		</div>

		

		<hr>


		<button class="btn btn-sm btn-primary upload-all">Upload All</button>
		<button class="btn btn-sm btn-danger cancel-all">Cancel All</button>

	</div><!-- end .container -->


	<script>


		$('.upload-all').click(function(){
			//submit all form
			$('form').submit();
		});

		$('.cancel-all').click(function(){
			//submit all form
			$('form .cancel').click();
		});
		//indirect ajax
		//file collection array
		var fileCollection = new Array();
		var a = 0; var b = 0;
		$('#images').change(function(e){

			var files = e.target.files;
			a = $('.aaaa').length;
			$.each(files, function(i, file){

				fileCollection.push(file);
				
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e){
					
					var template = '<form class ="aaaa" action="#" id="'+(a+i)+'">'+
						'<img src="'+e.target.result+'"> '+
						'<button class="btn btn-sm btn-info upload" style="display:none;">Upload</button>'+
						'<button type="button" class="btn btn-sm btn-warning cancel">Cancel</button> &nbsp'+
						'<input class="btn btn-sm btn-danger" type="button" value="Delete" onclick="deleteRow(this,$(this).index())"/>'+
						'<div class="progress progress-striped active">'+
						'<div class="progress-bar" style="width:0%"></div>'+
						'</div>'+
						'</form>';

					$('#images-to-upload').append(template);
				};
				
			});
			
			
				
		});

		function deleteRow(btn,$index) {
		  	
  			btn.parentNode.remove(btn);
  			a = a-1;
  			
		}


		//form upload ... delegation
		$(document).on('submit','form',function(e){

			e.preventDefault();
			//this form index
			
			$form = $(this);
			
			var index = parseInt($(this).attr('id'));
			

			uploadImage($form,index);


		});

		function uploadImage($form,index){
			$form.find('.progress-bar').removeClass('progress-bar-success')
										.removeClass('progress-bar-danger');

			var formdata = new FormData($form[0]); //formelement
			formdata.append('image',fileCollection[index]);
			
			var request = new XMLHttpRequest();

			//progress event...
			request.upload.addEventListener('progress',function(e){
				var percent = Math.round(e.loaded/e.total * 100);
				$form.find('.progress-bar').width(percent+'%').html(percent+'%');
			});

			//progress completed load event
			request.addEventListener('load',function(e){
				$form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
				// var count = $("#images-to-upload form").length;
				// console.log(count);
				b = b+1;
				if(a == b){
					// window.location.replace("http://stackoverflow.com");

				}
			});

			request.open('post', 'server.php');
			request.send(formdata);

			$form.on('click','.cancel',function(){
				request.abort();

				$form.find('.progress-bar')
					.addClass('progress-bar-danger')
					.removeClass('progress-bar-success')
					.html('upload aborted...');
			});

		}


		
	</script>
</body>
</html>